<template>
  <el-card class="business-card" shadow="hover" :body-style="{ 
        padding: '0px 10px 0 0',
        height: aSize,
        width: '100%',
        display: 'flex'
     }">
    <!-- <img :src="productInfo.cover" class="image"> -->
    <div class="avatar" :style="{width: aSize, height: aSize}">
      <img v-if="!!info.cover" :src="getPath(info.cover)" alt="info.title" :style="{width: aSize, height: aSize}">
      <img v-else :src="getAvatar">
    </div>
    <div class="info">
      <p class="info-title">{{ info.title }}</p>
      <div class="shit">
        <p v-for="(details, key) in info.details" class="info-account" :key="key">
          {{ details.type }}：{{ details.value }}
        </p>
      </div>
    </div>
  </el-card>
</template>

<script>
import shitImg from "@/assets/logo.png";
import { makeHashAvatar } from "@/utils/hashAvatar.js";
import getPath from "@/utils/imagePath.js"


/**
 * props:
 *  avatarSize<Number>  指定头像显示大小，默认值为128
 *  info<Object>        显示信息
 *    cover<String>     图片的url
 *    title<String>     标题文本
 *    details<detail>   附加信息
 *       detail{
 *        type<String>
 *        value<String>
 *      }
 */
export default {
  props: {
    avatarSize: {
      type: Number,
      default: 128
    },
    info: {
      type: Object,
      default() {
        return {
          cover: shitImg,
          title: "联系人",
          details: [
            { type: "微信", value: "123456" },
            { type: "QQ", value: "1212123" },
            { type: "电话", value: "12121322123" }
          ]
        };
      }
    }
  },
  created() {
    //window.console.log(shitImg);
  },
  methods: {
    getPath
  },
  computed: {
    getAvatar() {
      return makeHashAvatar(this.info.title, this.avatarSize);
    },
    aSize() {
      return `${this.avatarSize}px`;
    }
  }
};
</script>


<style scoped>
.business-card {
  margin: 0 auto;
  margin-bottom: 16px;
  max-width: 1024px;
}
.avatar,
.info {
  box-sizing: border-box;
  vertical-align: top;
  height: 100%;
}

.avatar {
  margin-right: 16px;
}
.avatar img {
  width: 100%;
  height: 100%;
}

.info {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.info .info-title {
  width: 100%;
}

.shit {
  display: flex;
  /* white-space: nowrap; */
  justify-content: flex-start;
}

.info-title {
  font-size: 20px;
  font-weight: bolder;
  color: #303133;
  margin: 5px 0 10px;
}
.info-account {
  font-size: 14px;
  color: #606266;
  margin-right: 16px;
}
</style>